#{extends 'securesocial/SecureSocial/main.html'/}
#{set title: messages.get('securesocial.loginTitle') /}

<script language="javascript" type="text/javascript" charset="utf-8">
    function openid(type) {
        $('#openid-type').val(type);
        var msg = "&{'securesocial.openIdUser'}";
        msg = msg.replace("[type]", type);
        $('#openid-user').attr('placeholder', msg);
        $('#openid-form').show('fast');
    }
</script>

<div class="span12 columns">
    <div class="page-header">
        <h1>&{'securesocial.login'}</h1>
    </div>

    #{if flash.error}
    <div class="alert-message block-message error">
        <div class="alert-actions">
            ${flash.error}
        </div>
    </div>
    #{/if}

    <div class="clearfix">
        <p>&{'securesocial.clickOnYourAccount'}</p>

        <p>
            #{list items: providers, as: 'provider'}
                #{if provider.type != securesocial.provider.ProviderType.userpass}
                    #{if (provider.authMethod == securesocial.provider.AuthenticationMethod.OPENID ||
                         provider.authMethod == securesocial.provider.AuthenticationMethod.OPENID_OAUTH_HYBRID) &&
                       provider.needsUsername() }
                        <a href="javascript:openid('${provider.type}')">                        
                    #{/if}
                    #{else}
                        <a href="@{securesocial.SecureSocial.authenticate(provider.type.toString().toLowerCase())}">
                    #{/else}
                    <img src="@{'/public/images/providers/'}/${provider.type.toString().toLowerCase()}.png" title="${provider.type}"/></a>
                #{/if}
            #{/list}
        </p>
    </div>

    <div id="openid-form" class="clearfix" style="display:none;">
        #{form @securesocial.SecureSocial.authenticate(), autocomplete:'off'}
            <input id="openid-type" type="hidden" name="type">
            <fieldset>
                <div class="clearfix">
                        <input id="openid-user" name="openid.user" class="large">
                        <input type="submit" value="&{'securesocial.login'}" class="btn small">
                </div>                       
            </fieldset>
        #{/form}
    </div>

    #{if userPassEnabled }
    <div class="clearfix" >
        <p>&{'securesocial.useEmailAndPassword'}</p>
        #{form @securesocial.SecureSocial.authenticate(securesocial.provider.ProviderType.userpass), autocomplete:'off'}
            <fieldset>
                 <div class="clearfix #{ifError 'userName'} error #{/ifError}">
                    <label for="displayName">&{'securesocial.userName'}</label>
                    <div class="input">
                        <input id="displayName" class="large" name="userName" value="${flash.userName}"/>
                        #{ifError 'userName'}
                        <span class="help-inline">#{error 'userName'/}</span>
                        #{/ifError}
                    </div>
                </div>

                 <div class="clearfix #{ifError 'password'} error #{/ifError}">
                    <label for="password">&{'securesocial.password'}</label>
                    <div class="input">
                        <input id="password" class="large" name="password" type="password"/>
                        #{ifError 'password'}
                        <span class="help-inline">&{'securesocial.required'}</span>
                        #{/ifError}
                    </div>
                </div>

                <div class="actions">
                    <input type="submit" value="&{'securesocial.login'}" class="btn primary">
                </div>
            </fieldset>
        #{/form}
    </div>

    <div class="clearfix">
        <p>&{'securesocial.signUp'} #{a @securesocial.UsernamePasswordController.signUp()}&{'securesocial.here'}#{/a}</p>
    </div>
    #{/if}
</div>

